
<template>
<!--  还款单详情 -->
  <div class="ApplicationDetail">
    <div class="side_1"></div>
      <span class="add_1">
还款单
 </span>
 <el-button type="info" icon="el-icon-back"  class="btn_fanhui" @click="Fh">返回</el-button>
 <div class="body">
 <!-- 借款申请 -->
           <el-steps :active="2" align-center class="step" >
          <el-step title="提交申请"       :description="createon"></el-step>
          <el-step title="部门主管：已通过" :description="zhuguandate"></el-step>
        <el-step title="总经理：已通过"  :description="managedate"></el-step>
          <el-step title="财务：已通过"   :description="caiwudate"></el-step>
        </el-steps>
       <table>
          <tr >
            <td style="width:10%"> 申请类型</td>
            <td style="width:20%">
            {{applytype}}
            </td>
      
       
            <td style="width:10%">借款类型</td>
            <td style="width:20%">
       {{jiekuantype}}
            </td>
      
            <td style="width:10%"> 归还时间</td>
            <td colspan="2">
              {{returndate}}
            </td>
          
         
            <tr>
            <td style="width:10%">申请部门</td>
            <td >
       {{applydepart}}

            </td>
   
            <td style="width:10%">借款人</td>
            <td >
              {{borrower}}
            </td>
          
      
            
            <td style="width:10%">借款金额</td>
            <td colspan="2">
       {{money}}

            </td>
            </tr>

      <tr>
            <td rowspan="2">借款方式</td>
            <td colspan="6">{{borrsyle}}
      
            </td>
          </tr>
          <tr>
            <td >户名</td>
            <td >
             {{huname}}
            </td>
            <td style="width:8%">开户行</td>
            <td style="width:15%">
            {{openbank}}
            </td>
            <td style="width:8%">卡号</td>
            <td style="width:25%">
     {{cardno}}
            </td>
          </tr>
          
          <tr style="height:120px">
            <td style="width:10%">借款事由</td>
            <td colspan="6">
        
        {{reason}}
            </td>
          </tr>
        </table>
 </div>
 <div class="btn">
   <el-button type="primary" size="medium" @click="huankuan">确定</el-button>
      <el-button type="info" size="medium" @click="Fh">取消</el-button>
 </div>
 </div>
    </template>
<script>
import axios from 'axios'
export default {
  data(){
    
    return{
       createon:'',
      managedate:'',
     zhuguandate:'',
     caiwudate:'',
 
      applytype:'',
      jiekuantype:'',
      returndate:'',
  applydepart:'',
      reason:'',
      borrower:'',
      money:'',
      borrsyle:'',
      huname:'',
      openbank:'',
      cardno:'',

    }
  },
  
     created() {
    this.empno =JSON.parse(localStorage.getItem('empno'))
    this.Id=this.$route.query.ids;
     this.type=this.$route.query.type;
   this.getData()
  },
  methods:{
   Fh(){
      window.history.go(-1);
      },
  getData(){

var obj={
  applyno:this.Id,
      id:5
}
 var objs = JSON.stringify(obj);  
    console.log(objs)
     axios("/apis/PersonalCenter.asmx/Apply?index=2&jsondata="+objs+"&empno="+this.empno).then(
        ({ data }) => {
          var datas = this.$x2js.xml2js(data);
          console.log(datas)
          var list = JSON.parse(datas.string.__text);
          console.log(list)
         this.applytype=list.applytype;
         this.jiekuantype=list.jiekuantype;
         this.returndate=list.returndate;
         this.applydepart=list.applydepart;
         this.borrower=list.borrower;
         this.money=list.money;
         this.borrsyle=list.borrsyle;
         this.huname=list.huname;
         this.openbank=list.openbank;
         this.cardno=list.cardno;
          this.reason=list.reason;
          //归还时间
              if(list.returndate===null){
             this.returndate==''
           }else{
          var d1 = new Date(parseInt(list.returndate.substr(6, 13)));
          var y = d1.getFullYear();
          var m = d1.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = d1.getDate();
          d = d < 10 ? "0" + d : d;
          list.returndate = y + "-" + m + "-" + d;
          this.returndate=list.returndate;
           }

           //进度条时间

           // 1
           if(list.createon===null){
             this.createon==''
           }else{
          var d1 = new Date(parseInt(list.createon.substr(6, 13)));
          var y = d1.getFullYear();
          var m = d1.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = d1.getDate();
          d = d < 10 ? "0" + d : d;
          list.createon = y + "-" + m + "-" + d;
          this.createon=list.createon;
           }
        //2
        if(list.zhuguandate===null){
          this.zhuguandate==''
        }else{
           var d4 = new Date(parseInt(list.zhuguandate.substr(6, 13)));
          var y = d4.getFullYear();
          var m = d4.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = d1.getDate();
          d = d < 10 ? "0" + d : d;
          list.zhuguandate= y + "-" + m + "-" + d;
          this.zhuguandate=list.zhuguandate;
        }
          //3
          if(list.caiwudate===null){
            this.caiwudate==''
          }else{
          var d2=new Date(parseInt(list.caiwudate.substr(6, 13)));
          var y = d2.getFullYear();
          var m = d2.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = d2.getDate();
          d = d < 10 ? "0" + d : d;
          list.caiwudate= y + "-" + m + "-" + d;
          this.caiwudate=list.caiwudate;
          }
         
           //4
           if(list.managedate===null){
             this.managedate==''
           }else{
          var d3=new Date(parseInt(list.managedate.substr(6, 13)));
          var y= d3.getFullYear();
          var m = d3.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = d3.getDate();
          d = d < 10 ? "0" + d : d;
          list.managedate= y + "-" + m + "-" + d;
          this.managedate=list.managedate;
           }
        }
      )
       },
    huankuan(){
var obj={
  applyno:this.Id,
      
}
 var objs = JSON.stringify(obj);  
    console.log(objs)
 axios("/apis/PersonalCenter.asmx/Apply?index=4&jsondata="+objs+"&empno="+this.empno).then(
        ({ data }) => {
          var datas = this.$x2js.xml2js(data);
          console.log(datas)
         if (datas.string.__text == "还款申请已提交") {
            this.$message.success("还款申请已提交");
            window.history.go(-1);
          } else {
            this.$message.error(datas.string.__text);
          }

        }
 )
    },
     
     
  
  }
}

</script>
<style lang="scss" scoped>

@import "@/assets/scss/base.scss";
.body{
  
    width: 98%;
    height: 650px;
    background-color: $white;
    margin-left: 10px;
    margin-top: 50px;
    overflow: hidden;
}
.side_1{
    width:5px;
    height: 16px;
    background-color: $Header_color;
    margin-left: 10px;
    margin-top: 30px;
}
.add_1{
   margin-left: 20px;
  margin-top: -20px;
   float: left;
   font-size: 18px;
   font-weight: 400

}
.btn_fanhui{
    margin-top: -20px;
   margin-right: 20px;
    float:right;
}
.btn{
  margin-left: 45%;
  margin-top: 20px;
}
.step{
    margin-top: 50px;
}
 table,
            table tr {
              height: 60px;
            }
            table tr td {
                border: 1px solid #e7e7e7;
              
                text-align: center;
                
            }

  table{
            width: 70%;
            margin-left: 15%;
            margin-top: 50px;;
            
        }


</style>